$(function () {
  // console.log('ok');
  // 定义查询的参数
  const q = {
    // 页码值
    pagenum: 1,
    // 每页展示的数据条数
    pagesize: 2,
    // 查询的条件:文章的分类,如果值为空字符串,表示每页指定分类的条件
    cate_id: '',
    // 查询的条件:文章的发布状态,如果值为空字符串,表示每页发布状态对应的条件
    state: ''
  }

  // 封装文章列表数据的函数
  function initArtlist() {
    axios.get('/my/article/list', {
    params: q
  }).then(({ data: res }) => {
      console.log(res.data);
    // 调用函数
    if (res.code === 0) {
       // 定义一个空数组
        let rows = []
        // 把获取到的数据循环渲染到表格中
        res.data.forEach(function (item) {
        // console.log(item);
        rows.push(`
          <tr>
            <td><a href="javascript:;" style="color:blue" class="detail" data-id="${item.id}">${item.title}</a></td>
            <td>${item.cate_name}</td>
            <td>${dayjs(item.pub_date).format('YYYY/M/D HH:mm:ss')}</td>
            <td>${item.state}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
            </td>
          </tr>
        `)
      })
      $('tbody').html(rows)
      // 调用分页的函数
      page(res.total)
    }
    
  })

  }
  initArtlist()


  // 封装获取文章分类的函数
  function initCate() {
    axios.get('/my/cate/list').then(({ data: res }) => {
      // console.log(res);
      if (res.code == 0) {
        // 创建一个空数组
        let art_li = []
        res.data.forEach(function (item) {
          art_li.push(`
          <option value="${item.id}">${item.cate_name}</option>
          `)
        })
        $('[name="cate_id"]').append(art_li)
        // 如果表单中元素是动态追加的,则需要调用form.render重新渲染,否则追加的内容无法被展示出来
        layui.form.render('select')
      }
      })  
  }
  initCate()

  // 为筛选区域的表单绑定submit事件
  $('form').on('submit', function (e) {
    // 阻止表单的默认行为
    e.preventDefault()
    // 要根据用户指定的筛选条件,重新请求第1页的数据
    // 1.把用户勾选的分类的id,存储到q.cate_id中
    // 2.把用户勾选的发布状态,存储到q.state中
    // 3.把页码重置为1
    q.cate_id = $('[name="cate_id"]').val()
    q.state = $('[name="state"]').val()
    q.pagenum = 1

    // 重新渲染文章列表的数据
    initArtlist()
  })

  // 给重置按钮绑定点击事件
  $('.layui-btn-primary').on('click', function () {
    // 重置查询参数
    q.cate_id = ''
    q.state = ''
    q.pagenum = 1

    // 重新发起请求
    initArtlist()
  })

  // 封装分页的函数
  function page(total) {
    // 执行一个laypage实例
   layui.laypage.render({
      elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize,
      // 点击那个页码值出现高亮显示
     curr: q.pagenum,
     layout: ['count', 'limit', 'prev', 'page', 'next', 'skip',],
     limits: [2,3,6,8,9],
      jump: function(obj, first){
      //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        q.pagenum = obj.curr
        console.log(obj.limit); //得到每页显示的条数
        q.pagesize = obj.limit
      
      //首次不执行
      if(!first){
        initArtlist()
      }
    }
    });
  }


  // 给删除按钮注册委托事件
  $('tbody').on('click', '.btn-delete', function () {
    // 通过自定义属性拿到id值
    const id = $(this).attr('data-id')
    // 提示用户是否要删除
    layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
      axios.delete('/my/article/info', {
        params:{id}
      }).then(({ data: res }) => {
        console.log(res);
        if (res.code == 0) {
          layer.msg('删除成功')

          // 优化删除的功能,防止出现空白页码的情况
          if (q.pagenum > 1 && $('tbody tr').length === 1) {
            q.pagenum --
          }

          // 重新渲染列表
          initArtlist()

        }
      })
      
      layer.close(index);
    });
  })


  // 为标题的a链接绑定click事件事件委托
  $('tbody').on('click', '.detail', function () {
    // 通过自定义标签拿到id
    const id = $(this).attr('data-id')
    // 发起get请求获取文章详情
    axios.get('/my/article/info', {
      params: { id }
    }).then(({ data: res }) => {
      if (res.code === 0) {
        console.log(res);
        // 弹层展示文章的详情
        layer.open({
          type: 1,
          area: ['85%', '85%'],
          title: '预览文章',
          content: `
          <div class="artinfo-box">
            <h1 class="artinfo-title">${res.data.title}</h1>
            <div class="artinfo-bar">
              <span>作者：${res.data.username || res.data.nickname}</span> 
              <span>发布时间：${dayjs(res.data.pub_date).format('YYYY/M/D H:mm:ss')}</span>
              <span>所属分类：${res.data.cate_name}</span>
              <span>状态：${res.data.state}</span>
            </div>
            <hr>
          <img src="http://www.liulongbin.top:3008${res.data.cover_img}" alt="" class="artinfo-cover">
          <div>${res.data.content}</div>
          </div>  
          `
          });     
      }
      
    })
  })


})